<template>
    <view class="banner-container" v-if="parsedBannerUrls && parsedBannerUrls.length > 0">
        <swiper 
            class="banner-swiper" 
            :indicator-dots="parsedBannerUrls.length > 1" 
            :interval="3000" 
            :duration="300"
            @change="onSwiperChange"
            @transition="onSwiperTransition"
            @touchstart="onSwiperTouchStart"
            :circular="true"
            :autoplay="autoPlay"
            :disable-touch="stopTouchMove"
            indicator-color='#c1e6f6' 
            indicator-active-color='#62c9f4'
        >
            <swiper-item v-for="(url, index) in parsedBannerUrls" :key="index">
                <!-- 如果是视频 -->
                <view v-if="isVideo(url)" class="video-item">
                    <!-- 真正的video标签 -->
                    <video 
                        v-if="videoKeys[index] !== false"
                        :src="url" 
                        class="banner-video"
                        :id="`video-${index}`"
                        :show-fullscreen-btn="true"
                        :show-progress="true"
                        :show-mute-btn="false"
                        :show-loading="true"
                        :enable-progress-gesture="false"
                        :enable-play-gesture="false"
                        :page-gesture="false"
                        :direction="90"
                        :vslide-gesture="false"
                        :vslide-gesture-in-fullscreen="false"
                        :poster="getVideoPoster(url)"
                        object-fit="cover"
                        @play="onVideoPlay(index)"
                        @pause="onVideoPause(index)"
                        @ended="onVideoEnded(index)"
                        @error="onVideoError"
                        @loadeddata="onVideoLoadedData(index)"
                        @fullscreenchange="onFullscreenChange"
                        @click="onVideoClick(index)"
                    ></video>
                    
                    <!-- 视频封面覆盖层和播放按钮 - 只在暂停状态显示 -->
                    <!-- <cover-view v-show="!videoControls[currentIndex]" class="video-poster">
                        <view class="img-box">
                            <view class="play-btn-container">
                                <view 
                                    @click="playVideo(index)" 
                                    class="play-btn-img"
                                >
                                    <image src="../../static/play.png" mode="widthFix" class="play-icon"></image>
                                </view>
                            </view>
                        </view>
                    </cover-view> -->
                </view>
                
                <!-- 如果是图片 -->
                <image 
                    v-else 
                    :src="url" 
                    class="banner-image" 
                    mode="aspectFill"
                    @load="onImageLoaded"
                    @error="onImageError"
                />
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted, reactive, watch } from 'vue'

const props = defineProps({
    bannerUrls: {
        type: String,
        default: '[]'
    }
})

// 当前显示的索引
const currentIndex = ref(0)
// 是否自动播放轮播
const autoPlay = ref(true)
// 视频封面显示状态
const showPoster = reactive({})
// 视频控制状态
const videoControls = reactive({})
// 是否禁止滑动
const stopTouchMove = ref(false)
// 视频封面URL存储
const videoPosterUrls = reactive({})
// 视频上下文引用
const videoContexts = ref(new Map())
// 当前播放的视频索引
const currentPlayingVideo = ref(-1)
// 是否处于全屏状态
const isFullscreen = ref(false)
// 视频重新渲染的key，用于强制重新加载
const videoKeys = ref({})

// 解析 JSON 字符串为数组
const parsedBannerUrls = computed(() => {
    try {
        return JSON.parse(props.bannerUrls || '[]')
    } catch (error) {
        console.error('解析 bannerUrls JSON 失败:', error)
        return []
    }
})

// 判断是否为视频文件
const isVideo = (url) => {
    if (!url || typeof url !== 'string') return false
    
    // 支持的视频格式
    const videoExtensions = ['.mp4', '.webm', '.m4v', '.mov', '.avi']
    const lowerUrl = url.toLowerCase()
    
    // 检查文件扩展名
    const hasVideoExtension = videoExtensions.some(ext => lowerUrl.includes(ext))
    
    // 检查是否是视频URL
    const isVideoUrl = lowerUrl.includes('/video/') || 
                      (lowerUrl.includes('video') && !lowerUrl.includes('image')) ||
                      lowerUrl.includes('media')
    
    return hasVideoExtension || isVideoUrl
}

// 获取默认封面图
const getDefaultPoster = () => {
    // 返回一个默认的视频封面图
    return '../../static/video-default.jpg'
}

// 视频数据加载完成
const onVideoLoadedData = (index) => {
    console.log(`视频 ${index} 数据加载完成`)
    // 这里可以获取视频的第一帧作为封面
    // 由于uni-app限制，我们使用默认封面
}

// 获取视频封面图（第一帧）
const getVideoPoster = (url) => {
    // 方案1：如果有专门的封面图接口，可以这样处理
    // return url.replace('.mp4', '_poster.jpg')
    
    // 方案2：使用视频第一帧（需要服务器支持）
    // return url + '?vframe/jpg/offset/0'
    
    // 方案3：使用默认封面图
    return getDefaultPoster()
    
    // 方案4：返回空字符串，让video元素自动生成第一帧
    // return ''
}

// 初始化视频状态
const initVideoStates = () => {
    parsedBannerUrls.value.forEach((url, index) => {
        if (isVideo(url)) {
            showPoster[index] = true  // 默认显示封面（暂停状态）
            videoControls[index] = false // 初始化视频控制状态为false（暂停状态）
            videoKeys.value[index] = true  // 初始化视频key为true，表示显示
        }
    })
}

// Swiper 切换事件
const onSwiperChange = (e) => {
    const newIndex = e.detail.current
    const oldIndex = currentIndex.value
    currentIndex.value = newIndex
    
    console.log(`切换到第 ${newIndex} 个轮播项，从 ${oldIndex} 切换到 ${newIndex}`)
    
    // 如果上一个视频正在播放，重新加载它
    if (oldIndex && oldIndex != -1) {
        console.log(`----------------------上一个视频 ${oldIndex} 正在播放，重新加载它`)
        reloadVideo(oldIndex)
    }
    
    stopAllVideos()
}


// 微信小程序专用：重新加载视频来强制停止
const reloadVideo = (index) => {
    try {
        console.log(`重新加载视频 ${index} 来强制停止`)
        
        // 方法1：通过v-if隐藏视频，强制重新加载
        videoKeys.value[index] = false
        console.log(`视频 ${index} 已隐藏，等待重新显示`)
        
        // 延迟后重新显示视频，触发重新加载
        setTimeout(() => {
            videoKeys.value[index] = true
            console.log(`视频 ${index} 重新显示，开始重新加载`)
        }, 100)
        
        // 方法2：再次隐藏和显示，确保完全重新加载
        setTimeout(() => {
            videoKeys.value[index] = false
            console.log(`视频 ${index} 再次隐藏`)
            
            setTimeout(() => {
                videoKeys.value[index] = true
                console.log(`视频 ${index} 再次显示，完成重新加载`)
            }, 50)
        }, 300)
        
            
        return true
    } catch (error) {
        console.error(`重新加载视频 ${index} 失败:`, error)
        return false
    }
}

// 停止所有视频播放
const stopAllVideos = () => {
    console.log('停止所有视频播放')
    
    // 遍历所有视频，停止播放
    parsedBannerUrls.value.forEach((url, index) => {
        if (isVideo(url)) {
            try {
                // 多次尝试停止视频
                for (let i = 0; i < 3; i++) {
                    const videoContext = uni.createVideoContext(`video-${index}`)
                    if (videoContext) {
                        videoContext.pause()
                        videoContext.stop()
                        console.log(`视频 ${index} 第${i+1}次停止成功`)
                        break
                    }
                }
            } catch (error) {
                console.error(`停止视频 ${index} 失败:`, error)
            }
        }
    })

    
    // 重置视频状态
    parsedBannerUrls.value.forEach((url, index) => {
        if (isVideo(url)) {
            videoControls[index] = false
            showPoster[index] = true
        }
    })
    
    // 恢复轮播功能
    stopTouchMove.value = false
    autoPlay.value = true
    currentPlayingVideo.value = -1
    
    console.log('所有视频已停止，轮播功能已恢复')
}

// Swiper 开始滑动事件
const onSwiperTouchStart = (e) => {
    console.log('开始滑动swiper')
    
    // 停止所有视频播放
    if (currentPlayingVideo.value !== -1) {
        stopAllVideos()
    }
}

// Swiper 过渡事件
const onSwiperTransition = (e) => {
    // 停止所有视频播放
    if (currentPlayingVideo.value !== -1) {
        stopAllVideos()
    }
}

// 全屏状态变化事件
const onFullscreenChange = (e) => {
    isFullscreen.value = e.detail.fullScreen
    console.log('全屏状态变化:', isFullscreen.value)
    
    if (isFullscreen.value) {
        // 进入全屏时，确保轮播停止
        autoPlay.value = false
        stopTouchMove.value = true
    } else {
        // 退出全屏时，恢复轮播状态
        if (currentPlayingVideo.value === -1) {
            autoPlay.value = true
            stopTouchMove.value = false
        }
    }
}

// 播放视频 - 简化版本，只播放一个视频，其他视频暂停
const playVideo = (index) => {
    console.log(`播放视频 ${index}`)
    
    // 获取当前视频id
    let currentId = `video-${index}`
    console.log("currentId", currentId)
    
    // 创建当前视频上下文
    let videoContext = uni.createVideoContext(currentId)
    console.log("videoContext", videoContext)
    
    // 遍历所有视频，停止非当前视频
    parsedBannerUrls.value.forEach((url, itemIndex) => {
        if (isVideo(url)) {
            let tempId = `video-${itemIndex}`
            if (tempId !== currentId) {
                console.log(`暂停视频: ${tempId}`)
                uni.createVideoContext(tempId).pause() // 暂停视频播放
            }
        }
    })
    
    // 设置当前播放的视频
    currentPlayingVideo.value = index
    
    // 显示video的默认播放控件
    videoControls[index] = true
    
    // 隐藏覆盖层（播放时不显示封面）
    showPoster[index] = false
    
    // 禁止swiper滑动
    stopTouchMove.value = true
    
    // 停止自动轮播
    autoPlay.value = false
    
    // 播放当前视频
    if (videoContext) {
        videoContext.play()
        console.log(`视频 ${index} 开始播放`)
    }
}

// 视频播放事件 - 当video开始播放时触发
const onVideoPlay = (index) => {
    console.log(`视频 ${index} 开始播放`)
    
    // 设置当前播放的视频
    currentPlayingVideo.value = index
    
    // 当video播放的时候覆盖层隐藏，不能滑动，不能轮播
    showPoster[index] = false
    videoControls[index] = true
    stopTouchMove.value = true
    autoPlay.value = false
}

// 视频暂停事件
const onVideoPause = (index) => {
    console.log(`视频 ${index} 暂停`)
    
    // 暂停时恢复轮播功能
    endVideo(index)
}

// 视频结束事件
const onVideoEnded = (index) => {
    console.log(`视频 ${index} 播放结束`)
    
    // 结束时恢复轮播功能
    endVideo(index)
}

// 结束视频播放，恢复轮播功能
const endVideo = (index) => {
    console.log(`结束视频 ${index}`)
    
    // 隐藏video的默认播放控件
    videoControls[index] = false
    
    // 显示覆盖层（暂停状态显示封面和播放按钮）
    showPoster[index] = true
    
    // 允许swiper滑动
    stopTouchMove.value = false
    
    // 恢复自动轮播
    autoPlay.value = true
    
    // 清除当前播放的视频
    if (currentPlayingVideo.value === index) {
        currentPlayingVideo.value = -1
    }
}

// 视频加载错误
const onVideoError = (e) => {
    console.error('视频加载失败:', e)
    uni.showToast({
        title: '视频加载失败',
        icon: 'none',
        duration: 2000
    })
}

// 图片加载完成
const onImageLoaded = (e) => {
    console.log('图片加载完成')
}

// 图片加载错误
const onImageError = (e) => {
    console.error('图片加载失败:', e)
}

// 视频点击事件处理
const onVideoClick = (index) => {
    console.log(`视频 ${index} 被点击`)
    
    // 如果当前视频正在播放，则暂停它
    if (currentPlayingVideo.value === index) {
        pauseVideo(index)
    } else {
        // 否则播放这个视频
        playVideo(index)
    }
}

// 暂停视频
const pauseVideo = (index) => {
    console.log(`暂停视频 ${index}`)
    
    // 暂停视频播放 - 直接创建上下文
    try {
        const videoContext = uni.createVideoContext(`video-${index}`)
        if (videoContext) {
            videoContext.pause()
            videoContext.stop()
            console.log(`视频 ${index} 已暂停`)
        }
    } catch (error) {
        console.error(`暂停视频 ${index} 失败:`, error)
    }
    
    // 重置视频状态
    videoControls[index] = false
    showPoster[index] = true
    
    // 清除当前播放的视频索引
    if (currentPlayingVideo.value === index) {
        currentPlayingVideo.value = -1
    }
    
    // 恢复轮播功能
    stopTouchMove.value = false
    autoPlay.value = true
    
    console.log(`视频 ${index} 暂停完成，轮播功能已恢复`)
}

// 组件挂载时初始化
onMounted(() => {
    // 初始化视频状态
    initVideoStates()
    
    console.log('轮播组件初始化完成')
    
    // 监听轮播索引变化，确保视频停止
    watch(currentIndex, (newIndex, oldIndex) => {
        if (oldIndex !== undefined) {
            console.log(`轮播索引从 ${oldIndex} 变化到 ${newIndex}，强制停止视频`)
            // 延迟执行，确保DOM更新完成
            setTimeout(() => {
                stopAllVideos()
            }, 50)
        }
    })
})

// 组件卸载时清理
onUnmounted(() => {
    // 清理视频上下文
    videoContexts.value.clear()
})
</script>

<style lang="scss" scoped>
.banner-container {
    width: 100%;
    
    .banner-swiper {
        width: 100%;
        height: calc(100vw * 9 / 16);
        
        .video-item {
            position: relative;
            width: 100%;
            height: calc(100vw * 9 / 16);
        }
        
        .banner-video {
            width: 100%;
            height: calc(100vw * 9 / 16);
        }
        
        .banner-image {
            width: 100%;
            height: calc(100vw * 9 / 16);
            display: block;
        }
        
        .video-poster {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            
            .img-box {
                position: relative;
                width: 100%;
                height: 100%;
                
                .poster-img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
                
                .play-btn-container {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 100;
                    
                    .play-btn-img {
                        width: 120rpx;
                        height: 120rpx;
                        background: rgba(0, 0, 0, 0.7);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.3s ease;
                        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
                        
                        .play-icon {
                            color: #fff;
                            font-size: 48rpx;
                            margin-left: 8rpx;
                            font-weight: bold;
                            width: 48rpx;
                            height: 48rpx;
                        }
                        
                        &:active {
                            transform: scale(0.9);
                            background: rgba(0, 0, 0, 0.9);
                        }
                    }
                }
            }
        }
    }
}
</style> 